<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {

           background: url(img/beijing.jpg) no-repeat;
            background-size: cover;
            background-color: black;
        }

        h1 {
            color:crimson;
          text-align: center;
        }

        .header {
            margin: 150px auto;
                        height: 100px;
            width: 80%;
            margin-bottom: 30px;


        }

        #find {
            width: 50px;
            height: 30px;
            background-color: deepskyblue;
            border-radius: 10px;
        }

        .header input {
            border-radius: 5px;
            border: 1px solid black;
            height: 30px;
            width: 300px;

        }

        buttton {
            border: 3px solid gray;
            height: 30px;
            width: 30px;

        }

        .context {
            margin: 10px auto;
            border-right-color: aqua;
                        height: 500px;
            width: 80%;
            color:firebrick;
        }

        .footer {
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgba(100, 100, 100, 0.7);
            display: none;
            height: 100%;
            width: 100%;
        }

        .text1 {
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            height: 300px;
            width: 600px;
            background-color: lightblue;
            border-radius: 20px;
            padding: 20px;
        }

        #build {
            position: absolute;
            right: 40px;
            bottom: 40px;
            border-radius: 10px;
            height: 40px;
            width: 60px;
            border: 3px solid lightblue;
            background-color: cyan;

        }

        .Oinpt {
            border-radius: 10px;
            border: 1px solid lightblue;
            height: 30px;
            margin: 20px;
        }

        #table1 {
            width: 80%;
            text-align: center;
        }

        #table1 th {
            font-size: 2vw;
            font-weight: bold;
        }

        #table1 tr td button {
            border-radius: 30px;
            height: 20px;
            width: 40px;
            border: 1px solid #fff;
            background-color: cornsilk;

        }

        #add {
            border-radius: 10px;
            height: 30px;
            width: 70px;
            border: 3px solid lightblue;
            background-color: lightblue;
            margin-left: 73%;
            margin-top: 10px;
        }

        .findout {
            color: red;
            background-color: whitesmoke;
        }
        #div1{
            text-align:right;
            
        }
    </style>
</head>

<body>
    <!--   搜索栏-->
    <div class="header">
        <h1>看书宝</h1>
        <input id="value1" type="text" placeholder="请输入书名、作者或者出版社">
        <button id="find">搜索</button>
        <div id="div1"><a type="button" class="btn btn-default"
 href="%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2.html">注册</a></div>


    </div>
    <!--   搜索栏-->
    <div class="context">
        <!--       书库列表-->
        <table id="table1">
            <tr>
                <th>书名</th>
                <th>作者名</th>
                <th>出版社</th>
                <th>单价</th>
            </tr>

            <tr>
                <td>
                    <p class="book">大主宰</p>
                </td>
                <td>
                    <p class="author">天蚕土豆</p>
                </td>
                <td>
                    <p class="press">起点中文网</p>
                </td>
                <td>
                    <p class="price">10.00$</p>
                </td>
                <td><button class="Odelete">删除</button></td>
            </tr>
            <tr>
                <td>
                    <p class="book">飞剑问道</p>
                </td>
                <td>
                    <p class="author">我吃西红柿</p>
                </td>
                <td>
                    <p class="press">起点中文网</p>
                </td>
                <td>
                    <p class="price">18.00$</p>
                </td>
                <td><button class="Odelete">删除</button></td>
            </tr>
            <tr>
                <td>
                    <p class="book">绝世唐门</p>
                </td>
                <td>
                    <p class="author">唐家三少</p>
                </td>
                <td>
                    <p class="press">书包中文网</p>
                </td>
                <td>
                    <p class="price">12.00$</p>
                </td>
                <td><button class="Odelete">删除</button></td>
            </tr>
            <tr>
                <td>
                    <p class="book">万剑道尊</p>
                </td>
                <td>
                    <p class="author">打死都要钱</p>
                </td>
                <td>
                    <p class="press">搜狗阅读</p>
                </td>
                <td>
                    <p class="price">15.00$</p>
                </td>
                <td><button class="Odelete">删除</button></td>
            </tr>
        </table>
        <!--       书库列表-->
        <button id="add">添加</button>
    </div>
    <div class="footer">
        <div class="text1">
            书名：
            <input id="value4" class="Oinpt" type="text" placeholder="请输入书名"> 作者：
            <input id="value5" class="Oinpt" type="text" placeholder="请输入作者">
            <br> 数量：
            <input id="value7" class="Oinpt" type="text" placeholder="请输入出版社">
            <br> 价格：
            <input id="value8" class="Oinpt" type="text" placeholder="请输入价格"> 出版社：
            <input id="value6" class="Oinpt" type="text" placeholder="请输入出版社">
            <button id="build">添加</button>
        </div>

    </div>

    <script>
        
        var find = document.getElementById('find');
       
        find.onclick = function() {
            
            var value1 = document.getElementById('value1'); 
            var value2 = document.getElementById('value1'); 
            var value3 = document.getElementById('value1'); 
            var book = document.getElementsByClassName('book');       
            var author = document.getElementsByClassName('author'); 
            var chubanshe = document.getElementsByClassName('press');

            
            for (var i = 0; i < book.length; i++) {

                if (value1.value == book[i].innerHTML) {
                    book[i].style.color = 'black';
                    book[i].style.backgroundColor = 'white';
                } else if (value2.value == author[i].innerHTML) {
                    author[i].style.color = 'black';
                    author[i].style.backgroundColor = 'white';
                } else if (value3.value == chubanshe[i].innerHTML) {
                    chubanshe[i].style.color = 'black';
                    chubanshe[i].style.backgroundColor = 'white';


                } else {
                    book[i].parentNode.parentNode.style.display = 'none';
                }

            }
            value1.value = '';
            value2.value = '';
            value3.value = '';
        }

       



        var footer = document.getElementsByClassName('footer');
        var build = document.getElementById('build');
        var add = document.getElementById('add');

        add.onclick = function() {

            footer[0].style.display = 'block';

        }
        build.onclick = function() {
            var table1 = document.getElementById('table1'); 
            var value4 = document.getElementById('value4'); 
            var value5 = document.getElementById('value5'); 
            var value6 = document.getElementById('value6');
            var value7 = document.getElementById('value7'); 
            var value8 = document.getElementById('value8'); 
                
            var Oarr = [value4,value5,value6,value7,value8];
            var Otr = document.createElement('tr');
            for (var i = 0; i < 5; i++) {
                var Otd = document.createElement('td');
                var Op = document.createElement('p');
                Op.innerHTML = Oarr[i].value;

                table1.appendChild(Otr);
                Otr.appendChild(Otd);
                Otd.appendChild(Op);
            }
            var Otd = document.createElement('td');
            var Obtn = document.createElement('button');
            Obtn.className = 'Odelete';
            Obtn.innerHTML = '删除';
            Otr.appendChild(Otd);
            Otd.appendChild(Obtn);





            footer[0].style.display = 'none';

        }
        

        var Odelete = document.getElementsByClassName('Odelete');

        for (var j = 0; j < Odelete.length; j++) {
            Odelete[j].onclick = (function(idx) {
 
                return function() {

                    this.parentNode.parentNode.innerHTML = '';
                }
            })(j);
        }

    </script>
</body>

</html>
